<template>
    <div>
        <el-dialog v-model="info.isshow" :title="form.id > 0 ? '修改' : '新增'">
            <el-form :model="form" :rules="rules" ref="adminref">
                <el-form-item label="角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select v-model="form.roleid" placeholder="请选择">
                        <el-option v-for="item in rolelists" :key="item.id" :label="item.rolename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="账号" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="reset">取消</el-button>
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { onMounted, computed, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
import { useStore } from 'vuex';
import { ElMessage } from "element-plus";
import api from "../../request/api"

export default {
    props: ["info"],
    setup(props: any) {
        const store = useStore()
        const formLabelWidth = "140px";
        // form ref
        const adminref = ref<FormInstance>()

        const data = reactive({
            size: 1,
            page: 1,
        })
        // 表单
        const form: any = reactive({
            id: '',
            username: "",
            roleid: "",
            password: "",
            status: ""
        });
        // 验证
        const rules = reactive({
            roleid: [{
                required: true, message: "请选择角色名", trigger: "blur"
            }],
            username: [{
                required: true, message: "请输入账号名", trigger: "blur"
            }],
            password: [{
                required: true, message: "请输入密码", trigger: "blur"
            }],
            status: [{
                required: true, message: "请选择状态", trigger: "blur"
            }],
        })

        // 管理员列表
        const adminlists = computed(() => store.state.admin.adminlists)
        const rolelists = computed(() => store.state.role.rolelists)
        const totalsnum = computed(() => store.state.admin.totalsnum)

        //获取请求数据
        onMounted(() => {
            store.dispatch("admin/getadminlist", data);
            store.dispatch("role/getrolelist", data);
            store.dispatch("admin/gettotalsnum")
        });

        // 事件
        // 取消
        const reset = () => {
            props.info.isshow = false
            // 重置
            adminref.value?.resetFields()
            // 清空
            let newform = {
                id: '',
                username: "",
                roleid: "",
                password: "",
                status: ""
            }
            Object.assign(form, newform)
        }
        //提交
        const submit = () => {
            adminref.value?.validate((val: any) => {
                if (val) {
                    // 接口
                    const url = form.id > 0 ? "useredit" : "useradd"
                    api.usereditadd(url, form).then((res: any) => {
                        if (res.code == 200) {
                            ElMessage.success(res.msg)
                            // 弹窗
                            props.info.isshow = false
                            // 页面更新
                            store.dispatch("admin/getadminlist", data);
                            store.dispatch("admin/gettotalsnum")
                            // 清空
                            reset()
                        } else {
                            ElMessage.warning(res.msg)
                        }
                    })
                } else { ElMessage.error("请填写完整信息") }
            })
        }
        // 数据回显
        const setInfo = (obj: any) => {
            Object.assign(form, obj)
        }
        return {
            formLabelWidth,
            data,
            form,
            adminlists,
            rolelists,
            rules,
            reset,
            submit,
            adminref,
            totalsnum,
            setInfo
        }
    }

}

</script>

<style  scoped>

</style>